<template>
  <view>
    <view class="bg">
      <u-avatar size="128" :src="userinfo.portrait"></u-avatar>
      <view v-if="needAuth" class="flex-col align-center margin-top">
        <button class="auth" type="default" open-type="getUserInfo" @getuserinfo="getWxUserInfo" size="mini">微信登录</button>
      </view>
      <view v-else class="flex-col align-center">
        <view class="text-white text-lg text-bold margin-tb-sm">{{userinfo.nickname || '未登录'}}</view>
        <image class="vip-icon" :class="{ active: userinfo.level>1 }" src="../../static/images/vip.png" mode=""></image>
      </view>
    </view>

    <!-- 数据 -->
    <view class="data padding-lr">
      <u-grid :col="3" :border="false">
        <u-grid-item bg-color="transparent">
          <view class="num">{{this_week}}</view>
          <view class="grid-text">本周访问</view>
        </u-grid-item>
        <u-grid-item bg-color="transparent">
          <view class="num">{{last_week}}</view>
          <view class="grid-text">上周访问</view>
        </u-grid-item>
        <u-grid-item bg-color="transparent">
          <view class="num">{{total}}</view>
          <view class="grid-text">总访问</view>
        </u-grid-item>
      </u-grid>
    </view>

    <!-- vip -->
    <view class="padding-top flex-row justify-center">
      <image src="../../static/images/update.png" style="width: 710rpx;height: 90rpx;" mode="widthFix" @click="$goto('/pages/mine/vip')"></image>
    </view>

    <!-- 宫格 -->
    <view class="menu margin-tb padding-lr bg-white">
      <u-grid :col="4" :border="false">
        <u-grid-item v-for="i in menu" :key="i.id" @click="$goto(i.url)">
          <image :src="i.icon"></image>
          <view class="grid-text">{{i.text}}</view>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        menu: [{
            id: 1,
            icon: '/static/images/menu1.png',
            text: '会员中心',
            url: '/pages/mine/vip'
          },
          {
            id: 2,
            icon: '/static/images/menu2.png',
            text: '客服中心',
            url: '/pages/mine/kefu'
          },
          {
            id: 3,
            icon: '/static/images/menu3.png',
            text: '关于我们',
            url: ''
          },
          {
            id: 4,
            icon: '/static/images/menu4.png',
            text: '企大咖',
            url: ''
          },
        ],
        last_week: 0,
        this_week: 0,
        total: 0
      };
    },
    mounted() {},
    computed: {
      userinfo() {
        return this.$store.state.userinfo
      },
      needAuth() {
        return this.$store.state.needAuth
      }
    },
    onPullDownRefresh() {
      this.login()
      this.getCount()
    },
    onLoad() {
      this.login()
      this.getCount()
    },
    methods: {
      login() {
        uni.login({
          provider: 'weixin',
          success: login => {
            let {
              code
            } = login
            this.getUserInfo(code)
          }
        })
      },
      async getUserInfo(code) {
        let res = await this.$u.post('/wxlogin', {
          code: code
        })
        let {
          session_key,
          token,
          userinfo
        } = res.data.result

        this.session_key = session_key
        this.$store.commit('setToken', token)
        if (userinfo) {
          this.$store.commit('setUserInfo', userinfo)
          uni.stopPullDownRefresh();
        } else {
          this.$msg('请先授权登录')
          this.$store.commit('clearAuth')
          uni.stopPullDownRefresh();
        }
      },
      getWxUserInfo() {
        uni.getUserInfo({
          provider: 'weixin',
          success: res => {
            let {
              encryptedData,
              iv
            } = res
            this.postUserInfo({
              encryptedData,
              iv
            })
          },
          fail: err => {
            this.$msg('请先授权登录')
          }
        })
      },
      async postUserInfo(data) {
        let res = await this.$u.post('/auth', {
          encrypted_data: data.encryptedData,
          iv: data.iv,
          session_key: this.session_key
        })
        let {
          userinfo
        } = res.data.result
        this.$store.commit('setUserInfo', userinfo)
      },
      async getCount() {
        let {
          last_week,
          this_week,
          total,
          userinfo
        } = await this.$u.api.getUserInfo()
        this.last_week = last_week
        this.this_week = this_week
        this.total = total
        this.$store.commit('setUserInfo', userinfo)
        uni.stopPullDownRefresh()
      }
    }
  }
</script>

<style lang="scss">
  .bg {
    background: #3b3b3b;
    width: 750rpx;
    height: 400rpx;
    clip-path: circle(1500rpx at 50% -1100rpx);
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 64rpx 0;
    letter-spacing: 2rpx;
  }

  .vip-icon {
    width: 105rpx;
    height: 35rpx;
    filter: grayscale(1);

    &.active {
      filter: grayscale(0);
    }
  }

  .data {
    letter-spacing: 2rpx;

    .num {
      font-size: 36rpx;
      margin: 16rpx auto;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #E1A660;
    }

    .grid-text {
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #666666;
    }
  }

  .menu {
    image {
      width: 76rpx;
      height: 76rpx;
      object-fit: cover;
    }

    .grid-text {
      margin-top: 8rpx;
    }
  }

  .auth {

    &::after {
      border: none;
    }
  }
</style>
